<script setup>
import { computed, effect, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; 
import { useAllDataStore } from '../stores';
const store = useAllDataStore()
const tags = computed(()=>store.state.tags)
const route = useRoute()
const router = useRouter()
const handleTags = (tag) => {
    router.push(tag.path)
    store.selectMenu(tag)
}
const handleClose = (tag,index) => {
    store.deleteTags(tag)
    // 点击的不是当前页面则不管
    if(tag.name !== route.name) return
    // 判断是否为最后的标签
    if(index === store.state.tags.length){
        store.selectMenu(tags.value[index -1])
        router.push(tags.value[index -1].path)
    }else{
    store.selectMenu(tags.value[index])
    router.push(tags.value[index].path)
    }
}
</script>

<template>
<div class="tags">
    <el-tag 
    v-for="(tag,index) in tags"
    :key="tag.name"
    :closable="tag.name !== 'home'"
    :effect="route.name === tag.name ? 'dark' : 'plain'"
    @click="handleTags(tag)"
    @close="handleClose(tag,index)"
    >
    {{ tag.label }}
    </el-tag>
</div>
</template>

<style scoped lang="less">
.tags{
    margin: 20px 0 0 20px;
}
.el-tag{
    margin-right: 10px;
}
</style>
